<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> 
		 <link rel="stylesheet" href="bower_components/layer/layer.css"/>
	</head>
	<style>
		body .layui-layer-title{background:#233d4a; color:#fff; border: none;}
body .layui-layer-btn{border-color:1px solid #eea2bb}
body  .layui-layer-btn a{background:white;}
body  .layui-layer-btn .layui-layer-btn0{background:#233d4a;border:none;color: white;}
body .layui-layer-btn .layui-layer-btn1{background:#ffffff;}
		body{
			font-size: 13px;
			margin: 0;
			padding: 0;
		}
		#now_event{
			overflow: hidden;
		}
		.project_name,.user_name,.event_kind{
			display: inline-block;
			min-width: 100px;
			height: 25px;
		}
		.event_body{
			display: inline-block;
			width: 560px;
			vertical-align: top;
			
		}
		.event_body .event_text{
			display: inline-block;
			height: 50px;
		}
		.timeline-body{
			border-bottom: solid 1px #C7C7C7;
			background: #3c8dbc;
			color: white;
		}
		.time_box{
			border-bottom: solid 1px #C7C7C7;
			text-align: right;
			font-size: 12px;
		}
		ul{
			list-style: none;
			font-size: 12px;
			color: gray;
		}
		.timeline-body,.time_box,.event_body,.guild_box{
			padding-left: 20px;
			padding-right: 20px;
			padding-top: 10px;
			padding-bottom: 10px;
		}
		.guide_replay{
			border-bottom: solid 1px #C7C7C7;
			position: relative;
		}
		.guide_replay .time{
			position: absolute;
			bottom: 0;
			right: 20px;
		}
		.sub_edit{
			background: none;
			border: none;
			text-decoration: underline;
			color: #3c8dbc;
			position: absolute;
		   bottom: 0;
		   right: 130px;
		   font-size: 12px;
		}
		.guild_comment{
			position: relative;
			top: -11px;
		}
		.guild_comment input{
			width: 100%;
			height: 38px;
			padding: 0;
			border:1px solid #3C8DBC ;
		}
		.guild_comment span{
			position: absolute;
			top: 0;
			right: 0;
		}
		.guild_comment span button{
			height: 40px;
			width: 56px;
			background:#3C8DBC ;
			border: none;
			color:white;
		}
		.guild_comment span button i{
			color: white;
		}
		i{
			color: gray;
		}
		.time{
			color: gray;
		}
		.event_cont{
			display: inline-block;
			width: 486px;
			vertical-align: top;
		}
		.event_img img{
			width: 60px;
			height: 60px;
			margin-right: 4px;
		}
	</style>
	<body>
		<div id="now_event"></div>
	
	</body>
	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/layer/layer.js"></script>
	 <script src="js/jq.cookie.js"></script>
	<script>
		function GetQueryString(name)
		{
		     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		     var r = window.location.search.substr(1).match(reg);
		     if(r!=null)return  unescape(r[2]); return null;
		}
		var event_id = GetQueryString('data_id');
		
		$.ajax({
			type:"get",
			url:"http://www.duoweish.com/apis/EventDetail/",
			data:{
				Event:event_id,
				UserId:$.cookie('ID')
			},
			success:function(data){
				view2(data);
			}
		})
		
		
		
		function view2(data){
			
			
			var replay_box = "";
			var rep_box ="";
	            
			var Img_arr = "";
			
				           for (var n =0;n<data[6].length;n++) {
								var Img = '<img src="'+data[6][n]+'" width="50" />';
								Img_arr+=Img;
							}
			              for (var j=0;j<data[7].length;j++) {
				            	for (var m =0;m<data[7][j].length;m++) {
				            		if(m!==0){
				            		var rep = ` <li><label>${data[7][j][m][0]}：</label><span>${data[7][j][m][1]}</span></li> `;
				            		rep_box += rep;
				            		}
				                 }
				            var replay = `<div class="guide_replay">
											<label>${data[7][j][0][0]}:</label>
											<span class="guide_replay_text">${data[7][j][0][1]}</span>
											<span class="time">
												<i class="fa fa-clock-o"></i>
													${data[7][j][0][2]}
											</span>
											<div class="cstm_replay">
												<ul class="cstm_replay_text">
													${rep_box}
												</ul>
											</div>
										    <button class="sub_edit cstm_replay_btn" event="${data[7][j][0][3]}" id-card="${data[8]}">回复</button>
										</div>
										`;
							      
							replay_box+=replay;
							rep_box="";
			          	 }
			              var str = `<li class="view2">
								        <div class="timeline-item">
								               
								               <div class="timeline-body">
								                	<span>项目名称:</span><span class="project_name">${data[1]}</span>
								               	    <span>客户名称:</span><span class="user_name">${data[0]}</span>
								               	    <span>事件类型:</span><span class="event_kind">${data[3]}</span>
								               	</div>
								               	<div  class="event_body">
								               	    <label>事件内容:</label>
									                <div class="event_cont">
									                	
									                	<span class="event_text">${data[2]}</span>
									                	<div class="event_img">
									                		${Img_arr}
									                	</div>
									                </div>
								               	</div>
								                
								                <div class="time_box">
												       <span class="time">
															<i class="fa fa-clock-o"></i>
															${data[4]}
														</span>
								                        <span class="time">
															<i class="fa fa-user-o"></i>
															${data[5]}
														</span>
											   </div>
								                <div class="guild_box">
								                	 ${replay_box}
								                </div>
								                
												<div class="guild_comment input-group input-group-sm">
													<input class="guild_text input-sm form-control" type="text" />
												    <span  class="guild_sub" guild-event="${data[9]}" id-card="${data[8]}" >
												    	<button type="btn"><i class="fa fa-paper-plane"></i></button>
												    </span>
												</div>
								          
								            
								        </div>
								        
								    </li>`;
		    
				  $('#now_event').prepend(str);
				submit_comment();
				submit_call();
		}
		
		
		
		//提交评论
		function submit_comment(){
			$(".guild_sub").click(function(){
				
				var Card = $(this).attr('id-card');
				var Text = $(this).prev().val();
				console.log(Card)
				if(Card=='2'&&Text!=''){
					    
					    var gu_event = $(this).attr('guild-event');
							$.ajax({
									type:"get",
									url:"http://www.duoweish.com/apis/NewComment/",
									data:{
									    UserId:$.cookie('ID'),
										Event: gu_event,
										Content:Text
										},
									success:function(){
										layer.msg('提交成功');
										}
								});	
				
				       }
				if(Card=='1'||Card=='0'){
				       	layer.msg('提交失败！您没有相关权限')
				       }
				if(Text==''){
					layer.msg('请输入内容后提交');
				}
		          
		   })
		}
		//提交回复
		function submit_call(){
			$('.cstm_replay_btn').click(function(){
				var Guild = $(this).attr('event');
				var Card2 = $(this).attr('id-card');
				if(Card2!='0'){
					 layer.prompt({
						title: '请输入回复内容',
						area: ['300px', '150px']
					    }, function(text, index, value) {
						$.ajax({
							type: "get",
							url: "http://www.duoweish.com/apis/NewReply/",
							data: {
								UserId: $.cookie('ID'),
								Comment: Guild,
								Content: text
							},
							success:function(){
			
								layer.msg('提交成功');
								layer.close(index);
							}
		
					   });
						
					})
				 }else{
				 	layer.msg('提交失败！您没有相关权限');
				 }
			})
		}
	</script>
</html>
